<!DOCTYPE HTML>
<html>
<body>
  <h1>Canvas Demo</h1>
  <canvas id="canvas" width="300px" height="300px"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#00A308";
    ctx.beginPath();
    ctx.arc(220, 220, 50, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#FF1C0A";
    ctx.beginPath();
    ctx.arc(100, 100, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

    //the rectangle is half transparent
    ctx.fillStyle = "rgba(255, 255, 0, .5)"
    ctx.beginPath();
    ctx.rect(15, 150, 120, 120);
    ctx.closePath();
    ctx.fill();
        
  </script>
</body>
</html>
